<template>
    <div class="serve">
       <!-- 轮播图 -->
       <van-swipe class="my-swipe" :autoplay="3000" >
          <van-swipe-item>
            <img :src="require('../../assets/img/swper1.jpg')" alt="" class="swipe-img">
          </van-swipe-item>
          <van-swipe-item>
             <img :src="require('../../assets/img/swper2.png')" alt="" class="swipe-img">
          </van-swipe-item>
          <van-swipe-item>
              <img :src="require('../../assets/img/swper3.png')" alt="" class="swipe-img">
          </van-swipe-item>
          <van-swipe-item>
              <img :src="require('../../assets/img/swper1.jpg')" alt="" class="swipe-img">
          </van-swipe-item>
       </van-swipe>
       <!-- 公告区 -->
       <div class="notice">
         <van-icon name="chat-o" color="#1989fa" size="30px" class="notice-icon"/>
        <span class="notice-text">公告1234567</span>
       </div>
       <!-- 图标区 -->
      <div class="nav-icon">
            <ul class="icons">
              <li>
                <img :src="require('../../assets/icons/house.svg')" alt="" class="house-img">
                <span>房贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/car.svg')" alt="" class="car-img">
                <span>车贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/bag.svg')" alt="" class="bag-img">
                <span>公积金</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/yes.svg')" alt="" class="yes-img">
                <span>保单贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/firm.svg')" alt="" class="firm-img">
                <span>企业贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/list.svg')" alt="" class="list-img">
                <span>社保贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/star.svg')" alt="" class="star-img">
                <span>社保贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/card.svg')" alt="" class="card-img">
                <span>信用卡</span>

              </li>

            </ul>
      </div>
        <!-- 卡片区 -->
            <div class="messages-card message">
               <div class="message-name">
                 <span>产品名称：保单贷</span>
                 <span>贷款性质：信用贷款</span>
                 <span class="name-last1">最低利率：0.85%</span>
                 <span class="name-last2">最高额度：30万</span>
               </div>
               <div class="contact">
                 <span>立即申请</span>
                  <span>在线咨询：立即联系</span>
               </div>
            </div>
            <div class="messages-card message">
               <div class="message-name">
                 <span>产品名称：保单贷</span>
                 <span>贷款性质：信用贷款</span>
                 <span class="name-last1">最低利率：0.85%</span>
                 <span class="name-last2">最高额度：30万</span>
               </div>
               <div class="contact">
                 <span>立即申请</span>
                  <span>在线咨询：立即联系</span>
               </div>
            </div>
    </div>

</template>

<script>
export default {
  data () {
    return {

    }
  },
  created () {

  },
  methods: {

  }
}
</script>

 <style lang="less" scoped>
 .serve{
   width:100%;
   height:667px;
   background-color: #f5f5f5;
 }
 .my-swipe .van-swipe-item {
    width: 375px;
    height: 150px;
    .swipe-img{
      height:100%;
      width:100%;
    }
  }

  .notice{
    margin-top:10px;
    display: flex;

    width: 342px;
    height: 41px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 7px;
    margin-left:15px;
    text-align: center;
    .notice-text{
      display: inline-block;
      font-size: 14px;
      margin:10px 0  0 3px;
    }
    .notice-icon{
      margin:5px 8px 0 10px;
    }
}
 .nav-icon{

  width:340px;
  height:120px;
  text-align: center;
  background-color: #fff;
  margin: 10px 8px 0 15px;
  .icons{
    height:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    li{
      width:60px;
      height:38px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 12px;
      color:#505050;
      margin:10px 0 0 20px;
      span{
        display: inline-block;
        width:47px;
        height:13px;
        margin-left:-10px;
      }

    }
  }
}
 .house-img,.car-img,.bag-img,.yes-img,.firm-img,.peer-img,.star-img,.card-img,.list-img,.more-img{
  display: inline-block;
  width:23px;
  height:23px;
}
.messages-card{
  margin:35px  10px 10px 10px;
  width:355px;
  height: 100px;
  font-size: 12px;

  .message-name{
    height:65px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
   background-color:#08eb32d7;
   border-top-left-radius:8px;
   border-top-right-radius:8px;
   span{
     margin-top:5px;
    width:125px;
     height:18px;
     color:#505050;
     text-align: center;

   }

  }
    .name-last1{
     padding-left:-1px  !important;
   }
   .name-last2{
     padding-right:9px !important;
   }
  .contact{
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    height:35px;
    line-height: 35px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    padding:0 10px 0 15px;

  }
}
.message{
  margin-top:20px;
}
 </style>
